<template>
    <div class="container">
        <el-page-header @back="goBack" content="查看推广佣金"></el-page-header>
        <div class="e-m-t-45">
            <div class="flex">
                <div class="e-flex-1">
                    <el-form :inline="true">
                        <el-form-item label="时间范围">
                            <el-radio-group v-model="timeType" @input="getAll">
                                <el-radio-button label="1">本月</el-radio-button>
                                <el-radio-button label="2">本季度</el-radio-button>
                                <el-radio-button label="3">本年</el-radio-button>
                                <el-radio-button label="4">自定义日期</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="自定义日期" v-if="timeType == 4">
                            <el-date-picker type="daterange" v-model="date" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="setTime" :unlink-panels="true">
                            </el-date-picker>
                            <!-- :picker-options="expireTimeOPtion" -->

                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-form :inline="true">
                        <el-form-item>
                            <el-input placeholder="关键字搜索" prefix-icon="el-icon-search" clearable v-model="key"
                                @clear="getList"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getList">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>

        <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column fixed prop="relationnumber" label="关联用户编号">
            </el-table-column>
            <!-- <el-table-column prop="name" label="姓名" width="150">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号码" width="150">
            </el-table-column> -->
            <el-table-column prop="type" label="类型" width="150">
            </el-table-column>
            <el-table-column prop="createddatetime" label="创建时间" width="300">
            </el-table-column>
            <el-table-column prop="amount" label="佣金（元）" width="150">
            </el-table-column>
            <el-table-column prop="state" label="审核状态" width="150">
                <template slot-scope="scope">
                <span class="color-success" v-if="scope.row.state == '已审核'">{{ scope.row.state }}</span>
                <span class="color-danger" v-else>{{ scope.row.state }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="goOrderView(scope.row.relationid)">查看</el-button>
                    <el-popover
                        v-if="scope.row.state == '已驳回'"
                        placement="bottom"
                        title="驳回原因"
                        width="200"
                        trigger="click"
                        :content="scope.row.reason">
                        <el-button type="text" size="small" slot="reference">驳回原因</el-button>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '查看推广佣金' 
        }
    },
    data() {
        return {
            id: 0,
            key: '',
            page: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            timeType: 1,
            date: [],
            startdate: '',
            enddate: '',
            type: 1
        }
    },
    mounted() {
        this.id = this.utils.toInt(this.$router.history.current.query.id)
        this.type = this.$route.query.type
        this.getList()
    },
    methods: {
        setTime(time) {
            // this.date = []
            if (!time) {
                this.data = []
            }
        },
        goBack() {
            this.$router.go(-1)
        },
        getAll() {

        },
        getList() {

            this.tableData = []

            let param = {
                "PageIndex": this.page,
                "PageSize": this.pageSize,
                "key": this.key,
                "PromotionUserType": this.type,
                "PromoterUserId": this.id,
                "timeType": this.timeType
            }
            if (this.timeType == 4) {
                if (this.date !== null) {
                    param.startdate = this.date[0]
                    param.enddate = this.date[1]
                }

            }

            this.$axios.post('/Promoter/Commission/List', param).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
            })
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        goOrderView(relationid) {
            this.$router.push({
                path: '/order/user/Views?id=' + relationid
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
